<!doctype html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width">
  <link type="text/css" rel="stylesheet" href="common.css">
  <title>Angular file upload sample</title>

  <script type="text/javascript">
    FileAPI = {
      debug: true,
      //forceLoad: true, html5: false //to debug flash in HTML5 browsers
      //wrapInsideDiv: true, //experimental for fixing css issues
      //only one of jsPath or jsUrl.
      //jsPath: '/js/FileAPI.min.js/folder/',
      //jsUrl: 'yourcdn.com/js/FileAPI.min.js',

      //only one of staticPath or flashUrl.
      //staticPath: '/flash/FileAPI.flash.swf/folder/'
      //flashUrl: 'yourcdn.com/js/FileAPI.flash.swf'
    };
  </script>

  <!-- <script src="//code.jquery.com/jquery-1.9.0.min.js"></script> -->
  <script type="text/javascript">
    // load angularjs specific version
    var angularVersion = window.location.hash.substring(1);
    if (angularVersion.indexOf('/') == 0) angularVersion = angularVersion.substring(1);
    document.write('<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/' +
        (angularVersion || '1.2.24') + '/angular.js"><\/script>');
  </script>
  <script src="js/ng-file-upload-shim.js"></script>
  <script src="js/ng-file-upload.js"></script>
  <script src="js/upload.js"></script>

  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.8.0/codemirror.min.css">
  <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.8.0/codemirror.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.8.0/mode/htmlmixed/htmlmixed.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.8.0/mode/htmlembedded/htmlembedded.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.8.0/mode/xml/xml.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.8.0/mode/javascript/javascript.min.js"></script>
</head>

<body ng-app="fileUpload" ng-controller="MyCtrl">
<div class="ng-v">
  Angular Version: <input type="text" ng-model="angularVersion">
  <input type="button" data-ng-click="changeAngularVersion()" value="Go">
</div>
<h2>Angular file upload Demo</h2>

<h3>
  Visit <a href="https://github.com/danialfarid/ng-file-upload">ng-file-upload</a> on github
</h3>

<div class="upload-div">
  <div class="edit-div">
    <a ng-click="showEdit = !showEdit" href="javascript:void(0)">+ edit upload html</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a ng-show="showEdit" ng-click="confirm() && (editHtml = defaultHtml)" href="javascript:void(0)">reset to
      default</a><br/><br/>

    <div ng-show="showEdit" id="htmlEdit"></div>
  </div>

  <div class="upload-buttons">
    <div id="editArea">
      <div>
        <div>
          <form name="myForm">
            <fieldset>
              <legend>Upload on form submit</legend>
              Username: <input type="text" name="userName" ng-model="username" size="39" required>
              <i ng-show="myForm.userName.$error.required">*required</i><br>
              Profile Picture: <input type="file" ngf-select ng-model="picFile" name="file" ngf-accept="'image/*'" required>
              <i ng-show="myForm.file.$error.required">*required</i>
              <br/>

              <button ng-disabled="!myForm.$valid" ng-click="uploadPic(picFile)">Submit</button>
              <img ngf-src="picFile" class="thumb">
              <span class="progress" ng-show="picFile.progress >= 0">
                  <div style="width:{{picFile.progress}}%" ng-bind="picFile.progress + '%'"></div>
              </span>
              <span ng-show="picFile.result">Upload Successful</span>
            </fieldset>
            <br/>
          </form>
        </div>
        <fieldset>
          <legend>Play with options</legend>
          <div class="up-buttons">
            <div ngf-select ngf-drop ng-model="files" ngf-model-invalid="invalidFiles"
                 ng-model-options="modelOptionsObj"
                 ngf-multiple="multiple" ngf-pattern="pattern" ngf-accept="acceptSelect"
                 ng-disabled="disabled" ngf-capture="capture"
                 ngf-drag-over-class="dragOverClassObj"
                 ngf-validate="validateObj"
                 ngf-resize="resizeObj"
                 ngf-resize-if="resizeIfFn($file, $width, $height)"
                 ngf-dimensions="dimensionsFn($file, $width, $height)"
                 ngf-duration="durationFn($file, $duration)"
                 ngf-keep="keepDistinct ? 'distinct' : keep"
                 ngf-fix-orientation="orientation"
                 ngf-allow-dir="allowDir" class="drop-box" ngf-drop-available="dropAvailable">Select File
              <span ng-show="dropAvailable"> or Drop File</span>
            </div>
            <br/>
            <div ngf-drop ng-model="files" ngf-model-invalid="invalidFiles"
                 ng-model-options="modelOptionsObj"
                 ngf-multiple="multiple" ngf-pattern="'image/*'"
                 ng-disabled="disabled"
                 ngf-drag-over-class="dragOverClassObj"
                 ngf-validate="validateObj"
                 ngf-resize="resizeObj"
                 ngf-resize-if="resizeIfFn($file, $width, $height)"
                 ngf-dimensions="dimensionsFn($file, $width, $height)"
                 ngf-duration="durationFn($file, $duration)"
                 ngf-keep="keepDistinct ? 'distinct' : keep"
                 ngf-enable-firefox-paste="true"
                 ngf-fix-orientation="orientation"
                 ngf-allow-dir="allowDir" class="drop-box" ng-show="dropAvailable">
              <span>Paste or Drop Image from browser</span></div>
          </div>
          <div class="custom">
            <label>accept (for select browser dependent): <input type="text" ng-model="acceptSelect"></label><br/>
            <label>ngf-capture (for mobile): <input type="text" ng-model="capture"></label><br/>
            <label>ngf-pattern (validate file model): <input type="text" ng-model="pattern"></label><br/>
            <label>ngf-validate: <input type="text" ng-model="validate" size="49"></label><br/>
            <label>ngf-drag-over-class (chrome): <input size="31" type="text" ng-model="dragOverClass"></label><br/>
            <label>ng-model-options: <input type="text" size="43" ng-model="modelOptions"></label><br/>
            <label>ngf-resize: <input type="text" size="43" ng-model="resize"></label><br/>
            <label>ngf-resize-if: <input type="text" size="43" ng-model="resizeIf"></label><br/>
            <label>ngf-dimensions: <input type="text" size="43" ng-model="dimensions"></label><br/>
            <label>ngf-duration: <input type="text" size="43" ng-model="duration"></label><br/>
            <label><input type="checkbox" ng-model="multiple">ngf-multiple (allow multiple files)</label>
            <label><input type="checkbox" ng-model="disabled">ng-disabled</label><br/>
            <label><input type="checkbox" ng-model="allowDir">ngf-allow-dir (allow directory drop Chrome
              only)</label><br/>
            <label><input type="checkbox" ng-model="keep">ngf-keep (keep the previous model values in
              ng-model)</label><br/>
            <label><input type="checkbox" ng-model="keepDistinct">ngf-keep="distinct" (do not allow
              duplicates)</label><br/>
            <label><input type="checkbox" ng-model="orientation">ngf-fix-orientation (for exif jpeg files)</label><br/>
            <label>Upload resumable chunk size: <input type="text" ng-model="chunkSize"></label><br/>
          </div>

          <div class="preview">
            <div>Preview image/audio/video:</div>
            <img ngf-src="!files[0].$error && files[0]">
            <audio controls ngf-src="!files[0].$error && files[0]"></audio>
            <video controls ngf-src="!files[0].$error && files[0]"></video>
          </div>
        </fieldset>
        <br/>
      </div>
    </div>
  </div>
  <ul style="clear:both" class="response">
    <li class="sel-file" ng-repeat="f in files">
      <div>
        <img ngf-thumbnail="!f.$error && f" class="thumb">
				<span class="progress" ng-show="f.progress >= 0">
					<div style="width:{{f.progress}}%">{{f.progress}}%</div>
				</span>
        <button class="button" ng-click="f.upload.abort();f.upload.aborted=true"
                ng-show="f.upload != null && f.progress < 100 && !f.upload.aborted">
          Abort<span ng-show="isResumeSupported">/Pause</span>
        </button>
        <button class="button" ng-click="upload(f, true);f.upload.aborted=false"
                ng-show="isResumeSupported && f.upload != null && f.upload.aborted">Resume
        </button>
        <button class="button" ng-click="restart(f);f.upload.aborted=false"
                ng-show="isResumeSupported && f.upload != null && (f.progress == 100 || f.upload.aborted)">Restart
        </button>
        {{f.name}} - size: {{f.size}}B - type: {{f.type}}
        <a ng-show="f.result" href="javascript:void(0)" ng-click="f.showDetail = !f.showDetail">details</a>

        <div ng-show="f.showDetail">
          <br/>

          <div data-ng-show="f.result.result == null">{{f.result}}</div>
          <ul>
            <li ng-repeat="item in f.result.result">
              <div data-ng-show="item.name">file name: {{item.name}}</div>
              <div data-ng-show="item.fieldName">name: {{item.fieldName}}</div>
              <div data-ng-show="item.size">size on the serve: {{item.size}}</div>
              <div data-ng-show="item.value">value: {{item.value}}</div>
            </li>
          </ul>
          <div data-ng-show="f.result.requestHeaders" class="reqh">request headers: {{f.result.requestHeaders}}</div>
        </div>
      </div>
    </li>
    <li class="sel-file" ng-repeat="f in invalidFiles">
      <div>Invalid File: {{f.$error}} {{f.$errorParam}}, {{f.name}} - size: {{f.size}}B - type:
        {{f.type}}
      </div>
    </li>
  </ul>

  <br/>

  <div style="clear:both" class="err" ng-show="errorMsg != null">{{errorMsg}}</div>
</div>

<div style="clear:both" class="server">
  <div class="srv-title">How to upload to the server:</div>

  <div class="howto">
    <label><input type="radio" name="howToSend" ng-model="howToSend" value="1" ng-init="howToSend = 1">$upload.upload():
      multipart/form-data upload cross browser</label>
    <br/>
    <label><input type="radio" name="howToSend" ng-model="howToSend" value="2"
                  ng-disabled="usingFlash">$upload.http(): binary content with file's
      Content-Type</label>

    <div class="sub">Can be used to upload files directory into <a
        href="https://github.com/danialfarid/angular-file-upload/issues/88">CouchDB</a>,
      <a href="https://github.com/danialfarid/angular-file-upload/issues/87">imgur</a>, etc... without multipart form
      data (HTML5 FileReader browsers only)<br/>
    </div>
    <label><input type="radio" name="howToSend" ng-model="howToSend" value="3">Amazon S3 bucket upload</label>

    <form ng-show="howToSend==3" class="s3" id="s3form" action="http://localhost:8888" onsubmit="return false">
      <br/>
      Provide S3 upload parameters. <a href="http://aws.amazon.com/articles/1434/" target="_blank">Click here for
      detailed documentation</a><br/></br>
      <label>S3 upload url including bucket name:</label> <input type="text" ng-model="s3url"> <br/>
      <label>AWSAccessKeyId:</label> <input type="Text" name="AWSAccessKeyId" ng-model="AWSAccessKeyId"> <br/>
      <label>acl (private or public):</label> <input type="text" ng-model="acl" value="private"><br/>
      <label>success_action_redirect:</label> <input type="text" ng-model="success_action_redirect"><br/>
      <label>policy:</label> <input type="text" ng-model="policy"><br/>
      <label>signature:</label> <input type="text" ng-model="signature"><br/>
      <br/>
      <button ng-click="showHelper=!showHelper">S3 Policy signing helper (Optional)</button>
      <br/><br/>

      <div class="helper" ng-show="showHelper">
        If you don't have your policy and signature you can use this tool to generate them by providing these two fields
        and clicking on sign<br/>
        <label>AWS Secret Key:</label> <input type="text" ng-model="AWSSecretKey"><br/>
        <label>JSON policy:</label><br/> <textarea type="text" ng-model="jsonPolicy" rows=10 cols=70></textarea>
        <button ng-click="generateSignature()">Sign</button>
      </div>
    </form>
    <br/>
    <br/>

    <div ng-show="howToSend != 3">
      <input type="checkbox" ng-model="generateErrorOnServer">Return server error with http code: <input type="text"
                                                                                                         ng-model="serverErrorCode"
                                                                                                         size="5"> and
      message: <input type="text" ng-model="serverErrorMsg">
      <br/>
    </div>
    <br/>
  </div>
</div>
<a style="position:fixed;bottom:28px;right:10px;font-size:smaller;" target="_blank"
   href="https://angular-file-upload.appspot.com/donate.html">donate</a>
<a style="position:fixed;bottom:45px;right:10px;font-size:smaller;"
   href="https://github.com/danialfarid/angular-file-upload/issues/new">Feedback/Issues</a>
</body>
</html>
